<template>
  <section >
    <mt-swipe :auto="4000" :show-indicators="false" class="swipe">
      <mt-swipe-item>
        <img src="http://admin.jiayouzhanguanli.com/uploads/swiper/5c92225651725.jpg">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="http://admin.jiayouzhanguanli.com/uploads/swiper/5c92225651725.jpg">
      </mt-swipe-item>
      <mt-swipe-item>
        <img src="http://admin.jiayouzhanguanli.com/uploads/swiper/5c92225651725.jpg">
      </mt-swipe-item>
    </mt-swipe>
    <!-- 菜单 -->
    <nav>
      <ul class="nav">
        <li>
          <router-link to="/">
            <img src="../../assets/index/gongju.png">
            <p>管理工具</p>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <img src="../../assets/index/transfer.png">
            <p>出租出售</p>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <img src="../../assets/index/equipment.png">
            <p>设备设施</p>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <img src="../../assets/index/service.png">
            <p>智慧油站</p>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <img src="../../assets/index/job.png">
            <p>求职</p>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <img src="../../assets/index/recruit.png">
            <p>招聘</p>
          </router-link>
        </li>
      </ul>
    </nav>
    <!-- 列表 -->
    <section>
      <Lists :data="lists"></Lists>
    </section>
  </section>
</template>

<script>
  import Lists from '@/components/lists'
  import {mapGetters, mapActions} from 'vuex'

  export default {
    name: "index",
    data() {
      return {}
    },
    computed: {
      ...mapGetters(['lists', 'banner'])
    },
    methods: {
      ...mapActions(['getData'])
    },
    created: function () {
      this.getData()
    },
    components: {
      Lists
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .swipe {
    height: 150px;
  }

  .nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;

    img {
      width: 40px;
      height: 40px;
    }

    p {
      text-align: center;
      font-size: 12px;
    }
  }
</style>

